<template>
	<view class="content">
		<!-- 轮播 -->
		<swiper class="swiper-box" circular @change="change" autoplay="autoplay" indicator-dots="true" previous-margin="20px" next-margin="20px" indicator-active-color="rgba(255,255,255,1)">
			<swiper-item v-for="(item ,index) in bannerList" :key="index" class="swiper-item" @click="navToDetailPage({title: '轮播广告'})">
				<view class="swiper-h">
					<image :src="item.image" mode="aspectFill" />
				</view>
			</swiper-item>
		</swiper>
		<!-- 导航 -->
		<view class="category">
			<view class="box">
				<swiper	class="swiper" duration="300"  @change="categoryChange">
					<swiper-item v-for="(page, pageindex) in categoryList" :key="pageindex" >
						<view class="category-list">
							<view class="icon" v-for="category in page" :key="category.cat_id" @click="navToDetailGrid(category.url, category.tab)">
								<image mode="widthFix" :src="category.img" ></image>
								<view>{{ category.title }}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 就业班 -->
		<view class="jyclass bor10">
			<view class="uni-list">
				<view class="index_title"><view class="t">
					<text class="title-wrap">就业班</text>
					<navigator class="more" open-type="switchTab" url="/pages/jyclass/list">更多<text class="iconfont icon-jiantou"></text></navigator>
				</view></view>
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item, index) in jyclassList"  :key="index" @click="navToDetailPage(item,'/pages/jyclass/show')">
					<view class="uni-media-list">
						<view class="uni-media-list-logo">
							<image :src="item.nav_list_logo" mode="aspectFill"></image>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top uni-ellipsis">{{item.nav_name || ''}}</view>
							<!-- <text v-text="cutText(item)"></text> -->
							<view class="uni-media-list-text-bottom "><text class="u-line-3">{{item.nav_list_title || ''}}</text></view>
							<view class="price">{{item.nav_ori_price || '0.00'}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 直播课 -->
		<view class="live_list bor10">
			<view class="index_title"><view class="t">
				<text class="title-wrap">直播课</text>
				<navigator class="more" open-type="switchTab" url="/pages/live/list">更多<text class="iconfont icon-jiantou"></text></navigator>
			</view></view>
			<swiper class="live-swiper" circular @change="change" autoplay="autoplay" indicator-dots="true" indicator-active-color="rgba(220,16,17,1)">
				<swiper-item v-for="(item ,index) in liveList" :key="index" class="live-swiper-item" @click="navToDetailPage(item,'/pages/live/show')">
					
					<view class="swiper-h">
						<view class="title uni-ellipsis">{{item.title}}</view>
						<view class="time"><text v-if="item.beginTime">{{item.beginTime | getDate}}</text>{{item.subNum || 0}}人已预约</view>
						<view class="cl"></view>
						<view v-if="item.play_status == 2">
							<view class="btn">进入课堂</view>
						</view>
						<view v-else>
							<view class="btn">直播回看</view>
						</view>
						<view class="teacher">主讲：{{item.teacher || ''}}</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 精品小课 -->
		<view class="course_list bor10">
			<view class="index_title"><view class="t">
				<text class="title-wrap">精品小课</text>
				<navigator class="more" url="/pages/course/list">更多<text class="iconfont icon-jiantou"></text></navigator>
			</view></view>
			<view class="pic-lsit">
				<view v-for="(item, index) in courseList" :key="index" class="pic-item"  @click="navToDetailPage(item,'/pages/course/show')">
					<view class="image-wrapper">
						<image :src="item.nav_list_logo" mode="aspectFill"></image>
					</view>
					<view class="info">
						<view class="title uni-ellipsis">{{item.nav_name || ''}}</view>
						<view class="tt uni-ellipsis" >{{item.difficulty_name || ''}} · {{item.already_num || '0'}}人报名</view>
						<view class="price uni-ellipsis">
							<text class="tag">{{item.tag}}</text>
							<text class="p1">{{item.nav_ori_price || '0.00'}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {  
	    mapState 
	} from 'vuex'; 
	export default {
		components: {
		},
		data() {
			return {
				swiperGridHeight: '0px',
				swiperGridWidth: '100%',
				bannerList: [], //轮播图
				categoryList: [], //导航
				currentPageindex: 0,
				jyclassList: [], //就业班
				liveList:[],//直播课
				courseList:[],//小课
			}
		},
		filters:{
			getDate(time){
				let date = '';
				if(time){
					if(/^\d+$/.test(time)){
						date = new Date(time*1000);
					}else{
						return time;
					}
					
				}else{
					date = new Date();
				}
				
				let year = date.getFullYear(),
				month = date.getMonth() + 1,
				day = date.getDate();
				
				let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(),
				minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(),
				second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
				month >= 1 && month <= 9 ? (month = "0" + month) : "";
				day >= 0 && day <= 9 ? (day = "0" + day) : "";
				var timer = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;
				return timer;
			}
		},
		onLoad() {
			this.loadData();
		},
		computed: {
			...mapState(['hasLogin','userInfo'])
		},
		methods: {
			onShareAppMessage: function(e) {
				let title = '乐字节'
				return {
					title: title,
					path: 'pages/index/index'
				}
			},
			cutText(item){
				if(item && item.description){
					return item.description.substring(0,25);
				}else{
					return '';
				}
			},
			async loadData(){
				//轮播图
				await this.$http.post('api/common/banner').then(res=>{
					if(res.code === this.sucCode){
						this.bannerList = res.data || [];
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
				//导航
				//导航
				let categoryList = await this.$api.json('categoryList');
				this.categoryList = categoryList;
				// console.log(111,this.categoryList)
				/* await this.$http.post('').then(res=>{
					if(res.code === this.sucCode){
						this.bannerList = res.data || [];
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				}); */
				let params = {};
				params.page = 1;
				params.pagesize = 10;
				//就业班
				await this.$http.post('api/common/jyclass',params).then(res=>{
					if(res.code === this.sucCode){
						this.jyclassList = res.data.list || [];
						if(this.jyclassList.length > 0){
							this.jyclassList = this.jyclassList.slice(0,5);
						}
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
				//直播课
				await this.$http.post('api/live/livelist',params).then(res=>{
					if(res.code === this.sucCode){
						this.liveList =  res.data.list || [];
						if(this.liveList.length > 0){
							this.liveList = this.liveList.slice(0,6);
						}
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
				//小课
				await this.$http.post('api/allcourse/index',params).then(res=>{
					if(res.code === this.sucCode){
						this.courseList = res.data.list || [];
						if(this.courseList.length > 0){
							this.courseList = this.courseList.slice(0,6);
						}
					}else{
						this.$mHelper.toast(res.msg);
					}
					
				}).catch(err=>{
					console.log(err);
				});
			},
			/* async loadData2() {
				//轮播图
				let bannerList = await this.$api.json('bannerList');
				this.bannerList = bannerList;
				//导航
				let categoryList = await this.$api.json('categoryList');
				this.categoryList = categoryList;
				//就业班
				let jyclassList = await this.$api.json('jyclassList');
				this.jyclassList = jyclassList;
				//直播课
				let liveList = await this.$api.json('liveList');
				this.liveList = liveList;
				//小课
				let courseList = await this.$api.json('courseList');
				this.courseList = courseList.slice(0, 6);
			}, */
			
			
			//链接
			navToDetailPage(item,url) {
				if(!url){
					return ;
				}
				//let id = item.text;
				if(item.nav_id){
					url += '?id='+item.nav_id	
				}
				if(item.id){
					url += '?id='+item.id	
				}
				uni.navigateTo({
					url: url 
				})
			},
			//分类链接
			navToDetailGrid(url, tab) {
				if(tab){
					uni.switchTab({  
						url  
					})  
				}else{
					uni.navigateTo({
						url: url
					})
				}
			},
			/**
			 * 统一跳转接口,拦截未登录路由
			 * navigator标签现在默认没有转场动画，所以用view
			 */
			navTo(url){
				if(!this.hasLogin){
					url = '/pages/user/login';
					uni.navigateTo({  
						url  
					})
				}else{
					uni.switchTab({  
						url  
					})  
				}
			},
			
			change(e) {
				this.current = e.detail.current
			},			
			
		},
	}
</script>

<style lang="scss">
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #fff
	}
	.category {padding:0 0upx;height: 230upx;
		.box {
			width: 100%;
			background-color: #ffffff;
			padding-bottom: 0upx;
			.dots {
				display: flex;
				justify-content: center;
				height: 15upx;
				width: 100%; 
				view{
					width: 40upx;
					height: 8upx;
					margin: 0 5upx;
					background-color: rgba(0, 0, 0, 0.2);
					&.active {
						background-color: #9d1515;
					}
				}
			}
			.swiper {
				width: 100%;
				padding: 30upx 0 0;
				.uni-swiper-dot {
					width: 10upx;
				}
				.category-list {
					width: 100%;
					height: auto;
					display: flex;
					justify-content: flex-start;
					padding: 10upx 0;
					flex-flow: wrap;
					.icon {
						width: 25%;
						display: flex;
						flex-flow: wrap;
						justify-content: center;
						font-size: 22upx;
						color: #333;
						margin-bottom: 30upx;
						image {
							width: 50%;
							height: 12vw;
						}
						view{
							width: 100%;
							display: flex;
							justify-content: center;font-size: 32upx;
						}
					}
					.iconfont{background: #000; border-radius: 50%;width: 140upx; height: 140upx}
				}
			}
		}
	}
</style>
